import React, { PureComponent, Fragment } from 'react';
import uuid from 'es6-uuid';
import { CheckCircleOutlined, CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Row, Col, Card, Popover } from 'antd';
import PmsBuildCss from './PmsBuild.less';

const { Meta } = Card;

export default class Build extends PureComponent {
  renderResult(meta) {
    const { nodeId } = this.props;
    if (!meta.start) return <QuestionCircleOutlined style={{ color: '#24AC38', fontSize: 24 }} />;
    return meta.result ? <CheckCircleOutlined style={{ color: '#24AC38', fontSize: 24 }} /> : <CloseCircleOutlined style={{ color: '#FF0000', fontSize: 24 }} />;
  }

  render() {
    const { number, index, strategy, nodeId } = this.props;
    const data = index.concat(strategy).filter((val) => val.pid === nodeId);
    const lg = 24 / number;
    return (
      <div className={PmsBuildCss.pmsDiy}>
        {data.map((item, i) => {
          if (i % number === 0) {
            return (
              <Row key={uuid(10)} gutter={{ lg: 20 }}>
                {data.map((meta, j) => {
                  if (j >= i && j < i + number) {
                    return meta.type === 'index' ? (
                      <Col key={uuid(10)} lg={lg}>
                        <Meta title={meta.name} description={meta.indexValue || '\\'} />
                      </Col>
                    ) : (
                      <Col key={uuid(10)} lg={lg}>
                        {meta.reason && !meta.result ? (
                          <Popover content={meta.reason} trigger='hover'>
                            <Meta title={meta.name} description={this.renderResult(meta)} />
                          </Popover>
                        ) : (
                          <Meta title={meta.name} description={this.renderResult(meta)} />
                        )}
                      </Col>
                    );
                  } else {
                    return '';
                  }
                })}
              </Row>
            );
          } else {
            return '';
          }
        })}
      </div>
    );
  }
}
